<template>
  <div class="home-page">
    <div class="home-background">
      <!-- 文字和输入框容器 -->
      <div class="content-overlay">
        <div class="text-input-group">
          <p class="overlay-text">汇聚交通资源&nbsp;&nbsp; 推动数据开发</p>
          <el-input
            size="large"
            class="overlay-input"
            placeholder="请输入目录名称等关键字"
            v-model="searchKeyword"
          >
            <template #append>
              <div class="search-button" @click="handleSearch()" :loading="loading">
                <img src="@/assets/imgs/home/search.png" />
                <span>搜索</span>
              </div>
            </template>
          </el-input>
        </div>
      </div>
      <img class="home-background-img" src="@/assets/imgs/home/background.png" />
    </div>

    <!-- 数据统计  -->
    <el-row :gutter="24" class="content">
      <div class="home-content">
        <!-- 添加内容容器 -->
        <div class="content-container">
          <div class="stats-wrapper">
            <div class="stats-title">
              <img src="@/assets/imgs/home/like.png" />
              <span>数据统计</span>
            </div>
            <!-- 横向统计数据容器 -->
            <div class="stats-container">
              <!-- 使用v-for循环渲染统计项 -->
              <div class="stat-item" v-for="(item, index) in statsData" :key="index">
                <!-- <el-statistic :title="item.label" :value="item.value" :suffix="item.suffix" /> -->
                <span class="stat-label">{{ item.label }}</span>
                <CountTo class="stat-value" :startVal="0" :endVal="item.value" :duration="1500" />
                <span class="stat-suffix">{{ item.suffix }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 背景图片 -->
        <!-- <img src="@/assets/imgs/home/data-background.png" alt="" class="background-img" /> -->
      </div>
    </el-row>

    <!-- 数据分类  -->
    <div class="data-classify-container">
      <div class="data-classify">数据分类</div>
      <el-row :gutter="24" class="content data-classify-row">
        <el-col :span="24">
          <div class="all-categories-container">
            <!-- 加载状态 -->
            <div v-if="allDataLoading" class="loading-container">
              <el-icon class="is-loading">
                <Loading />
              </el-icon>
              <span>加载中...</span>
            </div>

            <!-- 错误状态 -->
            <div v-else-if="allDataError" class="error-container">
              <el-alert :title="allDataError" type="error" show-icon />
            </div>

            <!-- 所有分类数据展示 -->
            <div v-else>
              <div v-for="item in dataItems" :key="item.id" class="category-section">
                <div class="category-title">
                  <div class="category-title-item">
                    <img class="category-title-icon-first" src="@/assets/imgs/home/fl.png" />
                    <span>
                      {{ item.label }}
                    </span>
                  </div>
                  <div class="category-title-item">
                    <img class="category-title-icon-second" src="@/assets/imgs/home/jt.png" />
                  </div>
                </div>

                <div class="category-content">
                  <div
                    v-for="dataItem in allCategoriesData.get(item.dictType)?.data"
                    :key="dataItem.id"
                    class="data-item-row"
                    @click="handleGridItemClick(dataItem)"
                  >
                    <img src="@/assets/imgs/home/arrow_two.svg" />
                    <div class="data-item-left">{{ dataItem.label }}</div>

                    <!-- <div class="data-item-right">{{ dataItem.value }}</div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- <div class="data-statistics-container">
      <div class="data-classify">数据统计</div>
      <el-row :gutter="24" class="content data-statistics-row">
        <el-col class="column-item" :span="8">
          <div class="statistics-container">
            <div class="statistics-content">
              <div
                class="statistics-row"
                v-for="(row, rowIndex) in groupedStatistics"
                :key="rowIndex"
              >
                <div class="statistic-item" v-for="item in row" :key="item.id">
                  <CountTo class="stat-value" :startVal="0" :endVal="item.value" :duration="1500" />
                  <span class="stat-label">{{ item.label }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="charts-container">
            <div v-for="chart in chartData" :key="chart.id" class="chart-item">
              <div class="chart-header">
                <div class="chart-title">{{ chart.title }}</div>
                <div class="date-selector">
                  <el-select
                    :model-value="
                      selectedDates.find((item) => item.chartId === chart.id)?.value || '7days'
                    "
                    @update:model-value="(value) => handleDateChange()"
                    size="small"
                    style="width: 120px"
                  >
                    <el-option
                      v-for="option in dateOptions"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value"
                    />
                  </el-select>
                </div>
              </div>

              <div class="chart-content">
                <Echart :height="300" :options="chart.options" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div> -->

    <div class="data-statistics-container">
      <div class="data-classify">数据统计</div>
      <el-row :gutter="24" class="content data-statistics-row">
        <!-- 移除左侧统计数据区域，直接展示图表 -->
        <el-col :span="12">
          <div class="charts-container">
            <!-- 仅保留接口调用数据图表 -->
            <div class="chart-item">
              <!-- 图表标题和日期选择器 -->
              <div class="chart-header">
                <div class="chart-title">接口调用数据</div>
                <div class="date-selector">
                  <el-select
                    v-model="selectedDate"
                    @change="handleDateChange"
                    size="small"
                    style="width: 120px"
                  >
                    <el-option
                      v-for="option in dateOptions"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value"
                    />
                  </el-select>
                </div>
              </div>

              <!-- ECharts图表 -->
              <div class="chart-content">
                <Echart :height="300" :options="chartOptions" />
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div class="charts-container">
            <!-- 仅保留接口调用数据图表 -->
            <div class="chart-item">
              <!-- 图表标题和日期选择器 -->
              <div class="chart-header">
                <div class="chart-title">近7日数据汇聚趋势</div>
              </div>

              <!-- ECharts图表 -->
              <div class="chart-content">
                <Echart :height="300" :options="sevenDayChartOptions" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 数据推荐 -->
    <div class="data-recommend-container">
      <div class="data-classify">数据推荐</div>
      <!-- <div class="recommend-tabs content">
        <div
          v-for="item in dataRecommendation"
          :key="item.id"
          @click="handleRecommendClick(item.id)"
          :class="{ active: selectedRecommendId === item.id }"
          class="recommend-tab"
        >
          <span>{{ item.title }}</span>
        </div>
      </div> -->
      <div class="recommend-content content">
        <el-row :gutter="24" class="column-content">
          <!-- 数据列 -->
          <el-col :span="12" class="column-item">
            <div class="recommend-column">
              <!-- 使用条件渲染判断是否有数据 -->
              <template v-if="filteredDataRecommendation && filteredDataRecommendation.length > 0">
                <div
                  v-for="(category, catIndex) in filteredDataRecommendation"
                  :key="catIndex"
                  class="recommend-category"
                >
                  <!-- 每个分类的标题 -->
                  <div class="item-header">
                    <div class="item-title">{{ category.title }}</div>
                    <div class="item-more" @click="handleMoreClick('dataCatalog')">
                      <span>更多</span>
                      <img src="@/assets/imgs/home/arrow_three.png" alt="更多" />
                    </div>
                  </div>
                  <div class="divider"></div>
                  <!-- 循环内容 -->
                  <div class="recommend-item">
                    <div class="recommend-item-scroll-container">
                      <!-- 检查当前分类是否有数据 -->
                      <template v-if="category.items && category.items.length > 0">
                        <div
                          class="item-body"
                          v-for="(content, index) in category.items"
                          :key="index"
                          @click="toDetail('dataCatalog', content)"
                        >
                          <div class="item-desc">{{ content.title }}</div>
                          <div class="item-footer">
                            <div class="footer-left">
                              <img src="@/assets/imgs/home/data_unit.png" alt="数据" />
                              <span>数据单位: {{ content.deptName }}</span>
                            </div>
                            <div class="footer-right">
                              <img src="@/assets/imgs/home/time.png" alt="时间" />
                              <span>数据更新时间: {{ content.updateTime }}</span>
                            </div>
                          </div>
                        </div>
                      </template>
                      <!-- 当前分类暂无数据 -->
                      <div v-else class="empty-data-item">
                        <div class="empty-icon">📊</div>
                        <div class="empty-text">该分类暂无数据</div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 整个数据列暂无数据 -->
              <div v-else class="empty-container">
                <div class="empty-icon-large">📚</div>
                <div class="empty-title">暂无数据目录</div>
                <div class="empty-desc">目前没有可推荐的数据目录</div>
              </div>
            </div>
          </el-col>

          <!-- 接口列 -->
          <el-col :span="12" class="column-item">
            <div class="recommend-column">
              <!-- 使用条件渲染判断是否有数据 -->
              <template
                v-if="filteredInterfaceRecommendation && filteredInterfaceRecommendation.length > 0"
              >
                <div
                  v-for="(category, catIndex) in filteredInterfaceRecommendation"
                  :key="catIndex"
                  class="recommend-category"
                >
                  <!-- 每个分类的标题 -->
                  <div class="item-header">
                    <div class="item-title">{{ category.title }}</div>
                    <div class="item-more" @click="handleMoreClick('dataInterface')">
                      <span>更多</span>
                      <img src="@/assets/imgs/home/arrow_three.png" alt="更多" />
                    </div>
                  </div>
                  <div class="divider"></div>
                  <!-- 循环内容 -->
                  <div class="recommend-item">
                    <!-- 检查当前分类是否有数据 -->
                    <template v-if="category.items && category.items.length > 0">
                      <div
                        class="item-body"
                        v-for="(content, index) in category.items"
                        :key="index"
                        @click="toDetail('dataInterface', content)"
                      >
                        <div class="item-desc">{{ content.interfaceName }}</div>
                        <div class="item-footer">
                          <div class="footer-left">
                            <img src="@/assets/imgs/home/data_unit.png" alt="数据" />
                            <span>数据单位: {{ content.deptName }}</span>
                          </div>
                          <div class="footer-right">
                            <img src="@/assets/imgs/home/time.png" alt="时间" />
                            <span>数据更新时间: {{ content.updateTime }}</span>
                          </div>
                        </div>
                      </div>
                    </template>
                    <!-- 当前分类暂无数据 -->
                    <div v-else class="empty-data-item">
                      <div class="empty-icon">🔌</div>
                      <div class="empty-text">该分类暂无数据</div>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 整个接口列暂无数据 -->
              <div v-else class="empty-container">
                <div class="empty-icon-large">🔗</div>
                <div class="empty-title">暂无接口推荐</div>
                <div class="empty-desc">目前没有可推荐的接口</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CountTo } from 'vue3-count-to'
import { Echart } from '@/components/Echart'
import type { EChartsOption } from 'echarts'
import * as PortalApi from '@/api/portal'
import { Loading } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
import { useSearchStore } from '@/store/modules/search'
import { setToken } from '@/utils/auth'

// 定义响应式变量
const selectedIndex = ref(-1) // 选中项索引
const selectedData: any = ref(null) // 选中项详情数据
const loading = ref(false) // 加载状态
const errorMsg = ref('') // 错误信息
const groupedStatistics: any = ref([])

// 定义统计数据
const statsData = ref([
  { label: '数据目录', value: 0, suffix: '个', index: 0 },
  { label: '数据表数', value: 0, suffix: '张', index: 1 },
  { label: '数据量', value: 0, suffix: '条', index: 2 },
  { label: '数据量', value: 0, suffix: 'GB', index: 3 },
  { label: '目录收藏数量', value: 0, suffix: '条', index: 4 }
])

const searchStore = useSearchStore()
const searchKeyword = ref('')

// 获取首页数据统计滚动数据
const getCountData = async () => {
  loading.value = true
  try {
    const res = await PortalApi.getCount()
    const data = await PortalApi.getTopIndex()
    if (res && data) {
      // 合并两个数据源的数据，不覆盖已有值
      statsData.value = [
        { label: '数据目录', value: Number(res.catalogCount || 0), suffix: '个', index: 0 },
        { label: '数据表数', value: Number(data.tableIndex.assetNum || 0), suffix: '张', index: 1 },
        { label: '数据量', value: Number(data.tableIndex.dataNum || 0), suffix: '条', index: 2 },
        {
          label: '数据量',
          value: formatBytesToGB(Number(data.tableIndex.dataSpace || 0)),
          suffix: 'GB',
          index: 3
        },
        { label: '目录收藏数量', value: Number(res.collectCount || 0), suffix: '条', index: 4 }
      ]
      loading.value = false
    } else {
      errorMsg.value = res?.msg || '获取统计数据失败'
      loading.value = false
    }
  } catch (error) {
    // errorMsg.value = error.message || '获取统计数据失败'
    loading.value = false
  }
}

// 添加字节转GB的工具函数
const formatBytesToGB = (bytes: number): number => {
  // 1GB = 1024^3 字节
  if (bytes === 0) return 0
  const gbValue = bytes / (1024 * 1024 * 1024)
  // 保留两位小数
  return Math.round(gbValue * 100) / 100
}

const dataItems = ref([
  {
    label: '业务领域',
    icon: 'icon.png',
    arrow: 'arrow.png',
    id: 1,
    dictType: 'businessDomain'
  },
  {
    label: '主题类型',
    icon: 'icon.png',
    arrow: 'arrow.png',
    id: 2,
    dictType: 'subjectType'
  },
  {
    label: '主题特征',
    icon: 'icon.png',
    arrow: 'arrow.png',
    id: 3,
    dictType: 'subjectFeature'
  },
  {
    label: '行业分类',
    icon: 'icon.png',
    arrow: 'arrow.png',
    id: 4,
    dictType: 'industryClass'
  },
  // {
  //   label: '业务分类',
  //   icon: 'icon.png',
  //   arrow: 'arrow.png',
  //   id: 5,
  //   dictType: 'businessClass'
  // },
  // {
  //   label: '管理对象分类',
  //   icon: 'icon.png',
  //   arrow: 'arrow.png',
  //   id: 6,
  //   dictType: 'manageObjClass'
  // },
  { label: '主题分类', icon: 'icon.png', arrow: 'arrow.png', id: 7, dictType: 'topicClass' }
])

const dataStatistics: any = ref([
  { label: '数据资源总数', value: 1630, index: 0, id: 1 },
  { label: '数据资源信息项总数', value: 1630, index: 8, id: 9 },
  { label: '库表资源总量', value: 1630, index: 9, id: 10 },
  // { label: '数据资源总数', value: 1630, index: 0, id: 1 },
  { label: '文件资源总量', value: 1598, index: 1, id: 2 },
  { label: '接口资源总量', value: 1102, index: 2, id: 3 },
  { label: '已共享服务', value: 221102, index: 3, id: 4 },
  { label: '已共享数据量', value: 231102, index: 4, id: 5 },
  { label: '申请事项总数', value: 1598, index: 5, id: 6 },
  { label: '申请事项待处理', value: 1102, index: 6, id: 7 },
  { label: '申请事项已处理', value: 221102, index: 7, id: 8 }
])

// 图表数据定义
const chartData: any = ref([
  {
    id: 1,
    title: '接口调用数据',
    options: {
      xAxis: {
        type: 'category',
        data: [],
        axisLine: {
          lineStyle: {
            color: '#dcdfe6'
          }
        },
        axisLabel: {
          color: '#606266'
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#dcdfe6'
          }
        },
        axisLabel: {
          color: '#606266'
        },
        splitLine: {
          lineStyle: {
            color: '#ebeef5',
            type: 'dashed'
          }
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      series: [
        {
          data: [],
          type: 'line',
          smooth: false,
          symbolSize: 10,
          itemStyle: {
            color: '#47b9ff',
            shadowColor: 'rgba(71, 185, 255, 0.5)',
            shadowBlur: 10,
            shadowOffsetY: 3
          },
          lineStyle: {
            color: '#6ac6ff',
            width: 2,
            shadowColor: 'rgba(71, 185, 255, 0.3)',
            shadowBlur: 8
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(71, 185, 255, 0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(71, 185, 255, 0.1)'
                }
              ]
            }
          }
        }
      ]
    } as EChartsOption
  },
  {
    id: 2,
    title: '库表数据传输数据量统计',
    options: {
      xAxis: {
        type: 'category',
        data: [],
        axisLine: {
          lineStyle: {
            color: '#dcdfe6'
          }
        },
        axisLabel: {
          color: '#606266'
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#dcdfe6'
          }
        },
        axisLabel: {
          color: '#606266'
        },
        splitLine: {
          lineStyle: {
            color: '#ebeef5',
            type: 'dashed'
          }
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      series: [
        {
          data: [],
          type: 'line',
          smooth: false,
          symbolSize: 10,
          itemStyle: {
            color: '#47b9ff',
            shadowColor: 'rgba(71, 185, 255, 0.5)',
            shadowBlur: 10,
            shadowOffsetY: 3
          },
          lineStyle: {
            color: '#6ac6ff',
            width: 2,
            shadowColor: 'rgba(71, 185, 255, 0.3)',
            shadowBlur: 8
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(71, 185, 255, 0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(71, 185, 255, 0.1)'
                }
              ]
            }
          }
        }
      ]
    } as EChartsOption
  }
])

const selectedDate = ref('7days')

const chartOptions: any = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [] // 动态填充日期
  },
  yAxis: {
    type: 'value',
    name: '调用次数'
  },
  series: [
    {
      name: '接口调用量',
      type: 'line',
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(45, 140, 240, 0.3)' },
            { offset: 1, color: 'rgba(45, 140, 240, 0.05)' }
          ]
        }
      },
      emphasis: {
        focus: 'series'
      },
      lineStyle: {
        width: 3,
        color: '#2d8cf0'
      },
      itemStyle: {
        color: '#2d8cf0'
      },
      symbol: 'circle',
      symbolSize: 8,
      data: [] // 动态填充调用量数据
    }
  ]
})

const sevenDayChartOptions: any = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [] // 动态填充日期
  },
  yAxis: {
    type: 'value',
    name: '数据量'
  },
  series: [
    {
      name: '数据量',
      type: 'line',
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(102, 177, 255, 0.3)' },
            { offset: 1, color: 'rgba(102, 177, 255, 0.05)' }
          ]
        }
      },
      emphasis: {
        focus: 'series'
      },
      lineStyle: {
        width: 3,
        color: '#66b1ff'
      },
      itemStyle: {
        color: '#66b1ff'
      },
      symbol: 'circle',
      symbolSize: 8,
      data: [] // 动态填充数据量
    }
  ]
})

function getDayCount(dateOption) {
  switch (dateOption) {
    case '3days':
      return 3
    case '7days':
      return 7
    case '1month':
      return 30
    case '3months':
      return 90
    case '1year':
      return 365
    default:
      return 7 // 默认返回7天
  }
}

const handleGridItemClick = (item: any) => {
  // 根据item的dictType确定filterType
  let filterType = ''
  let currentType = ''

  switch (item.dictType) {
    case 'businessDomain':
      filterType = 'businessDomain'
      currentType = '业务领域'
      break
    case 'subjectType':
      filterType = 'subjectType'
      currentType = '主题类型'
      break
    case 'subjectFeature':
      filterType = 'subjectFeature'
      currentType = '主题特征'
      break
    case 'industryClass':
      filterType = 'industryClass'
      currentType = '行业分类'
      break
    case 'topicClass':
      filterType = 'topicClass'
      currentType = '主题分类'
      break
  }

  // 使用searchStore存储筛选参数
  searchStore.setFilterParams({
    filterType: filterType,
    filterValue: item.value || item.label,
    filterLabel: item.label
  })

  // 跳转到数据目录页面
  router.push('/dataCatalog')
}

// 处理搜索
const handleSearch = () => {
  // 直接使用searchKeyword.value，而不是依赖参数
  if (searchKeyword.value.trim()) {
    // 设置搜索关键词到搜索存储中
    searchStore.setKeyword(searchKeyword.value.trim())
    // 跳转到数据目录页面，默认显示数据目录类型
    router.push('/dataCatalog')
  }
}

const updateStatisticsData = (apiData) => {
  if (!apiData || apiData.length === 0) {
    // 如果没有数据，使用默认数据
    dataStatistics.value = [
      { label: '数据资源总数', value: 0, index: 0, id: 1 },
      { label: '文件资源总量', value: 0, index: 1, id: 2 },
      { label: '接口资源总量', value: 0, index: 2, id: 3 },
      { label: '已共享服务', value: 0, index: 3, id: 4 },
      { label: '已共享数据量', value: 0, index: 4, id: 5 },
      { label: '申请事项总数', value: 0, index: 5, id: 6 }
    ]
    return
  }

  // 计算接口调用总量
  const totalApiCalls = apiData.reduce((sum, item) => sum + item.count, 0)
  // 计算平均调用量
  const avgCalls = Math.round(totalApiCalls / apiData.length)
  // 找出最高调用量
  const maxCalls = Math.max(...apiData.map((item) => item.count))
  // 找出最低调用量
  const minCalls = Math.min(...apiData.map((item) => item.count))

  // 使用接口数据更新统计信息
  dataStatistics.value = [
    { label: '总调用量', value: totalApiCalls, index: 0, id: 1 },
    { label: '平均调用量', value: avgCalls, index: 1, id: 2 },
    { label: '最高日调用', value: maxCalls, index: 2, id: 3 },
    { label: '最低日调用', value: minCalls, index: 3, id: 4 },
    {
      label: '接口总数',
      value: new Set(apiData.map((item) => item.interfaceId)).size,
      index: 4,
      id: 5
    },
    { label: '统计天数', value: apiData.length, index: 5, id: 6 }
  ]
}

// 日期选项
const dateOptions = [
  { label: '3天', value: '3days' },
  { label: '7天', value: '7days' },
  { label: '1个月', value: '1month' },
  { label: '3个月', value: '3months' },
  { label: '1年', value: '1year' }
]

// 推荐数据内容定义
const dataRecommendationRef = ref({
  dataList: [], // 存储getResourceDirectoryTop返回的数据
  interfaceList: [] // 存储getInterfaceTop返回的数据
})

const getLatestData = async () => {
  loading.value = true
  try {
    // 并行请求两个接口数据
    const [dataRes, interfaceRes] = await Promise.all([
      PortalApi.getResourceDirectoryTop(),
      PortalApi.getInterfaceTop()
    ])

    // 处理数据接口返回结果
    if (dataRes) {
      dataRecommendationRef.value.dataList = dataRes
    }

    // 处理接口接口返回结果
    if (interfaceRes) {
      dataRecommendationRef.value.interfaceList = interfaceRes
    }
  } catch (error) {
    console.error('获取最新数据失败:', error)
  } finally {
    loading.value = false
  }
}

// const interfaceRecommendationRef = ref([
//   {
//     id: 1,
//     title: '最新接口',
//     items: [
//       {
//         id: 1,
//         title: '客运数据接口',
//         description: '近期客运班次、乘客数量、线路运营情况等详细数据',
//         unit: '湖北省大数据中心',
//         updateTime: '2024-01-15 12:45'
//       },
//       {
//         id: 2,
//         title: '交通路线查询',
//         description: '用户查询和关注度最高的交通路线数据统计',
//         unit: '湖北省大数据中心',
//         updateTime: '2024-01-14 16:30'
//       }
//     ]
//   },
//   {
//     id: 2,
//     title: '热门接口',
//     items: [
//       {
//         id: 1,
//         title: '天气预测接口',
//         description: '精准的天气预测数据，为交通运营提供可靠的气象支持',
//         unit: '湖北省大数据中心',
//         updateTime: '2024-01-13 08:00'
//       },
//       {
//         id: 2,
//         title: '货物运输方案',
//         description: '智能算法生成的最优货物运输方案和数据支持',
//         unit: '湖北省大数据中心',
//         updateTime: '2024-01-12 14:20'
//       }
//     ]
//   },
//   {
//     id: 3,
//     title: '优质接口',
//     items: [
//       {
//         id: 1,
//         title: '天气预测接口',
//         description: '精准的天气预测数据，为交通运营提供可靠的气象支持',
//         unit: '湖北省大数据中心',
//         updateTime: '2024-01-13 08:00'
//       },
//       {
//         id: 2,
//         title: '货物运输方案',
//         description: '智能算法生成的最优货物运输方案和数据支持',
//         unit: '湖北省大数据中心',
//         updateTime: '2024-01-12 14:20'
//       }
//     ]
//   },
//   {
//     id: 4,
//     title: '推荐接口',
//     items: [
//       {
//         id: 1,
//         title: '天气预测接口',
//         description: '精准的天气预测数据，为交通运营提供可靠的气象支持',
//         unit: '湖北省大数据中心',
//         updateTime: '2024-01-13 08:00'
//       },
//       {
//         id: 2,
//         title: '货物运输方案',
//         description: '智能算法生成的最优货物运输方案和数据支持',
//         unit: '湖北省大数据中心',
//         updateTime: '2024-01-12 14:20'
//       }
//     ]
//   }
// ])

// 当前选中的推荐ID
const selectedRecommendId = ref(1)

// 修改 handleRecommendClick 方法
const handleRecommendClick = (id: number) => {
  selectedRecommendId.value = id
}

// 过滤数据推荐 - 左侧数据列
const filteredDataRecommendation = ref([
  {
    title: '目录推荐',
    items: []
  }
])

const filteredInterfaceRecommendation = ref([
  {
    title: '接口推荐',
    items: []
  }
])

// 监听数据变化，更新过滤后的数据
watch(
  () => dataRecommendationRef.value,
  (newData) => {
    // 更新数据推荐
    filteredDataRecommendation.value[0].items = newData.dataList.map((item) => ({
      title: item.catalogName,
      // description: item.catalogName || '暂无描述',
      deptName: item.deptName, // 根据实际情况设置单位
      updateTime: item.updateTime || '暂无更新时间',
      catalogId: item.catalogId
    }))

    // 更新接口推荐
    filteredInterfaceRecommendation.value[0].items = newData.interfaceList.map((item) => ({
      title: item.catalogName,
      // description: item.catalogName || '暂无描述',
      deptName: item.deptName, // 根据实际情况设置单位
      updateTime: item.updateTime || '暂无更新时间',
      catalogId: item.catalogId,
      interfaceName: item.interfaceName
    }))
  },
  { deep: true, immediate: true }
)

// 文字截断函数
const truncateText = (text: string, maxLength: number) => {
  if (text.length <= maxLength) return text
  return text.substring(0, maxLength) + '...'
}

// 处理日期选择变化
function handleDateChange() {
  // 直接根据selectedDate.value更新图表数据
  updateChartData()
}

// 更新图表数据
async function updateChartData() {
  try {
    loading.value = true
    const dayCount = getDayCount(selectedDate.value)

    // 调用接口获取数据
    const res = await PortalApi.getApiCallCount({
      dayCount: dayCount
    })

    // 重要修正：直接使用res作为数据，而不是res.data
    const apiData = res

    // 验证数据是否有效
    if (!apiData || !Array.isArray(apiData) || apiData.length === 0) {
      // 如果没有数据，使用模拟数据
      console.warn('接口返回数据为空，使用模拟数据')
      // 使用您提供的示例数据作为模拟数据
      const mockData = [
        {
          interfaceId: '1',
          interfaceName: '车辆送修',
          count: 12555,
          statisticalTime: '2025-10-16'
        },
        {
          interfaceId: '1',
          interfaceName: '车辆送修',
          count: 13204,
          statisticalTime: '2025-10-15'
        },
        {
          interfaceId: '1',
          interfaceName: '车辆送修',
          count: 22222,
          statisticalTime: '2025-10-14'
        },
        { interfaceId: '1', interfaceName: '车辆送修', count: 22222, statisticalTime: '2025-10-13' }
      ]
      processChartData(mockData, dayCount)
      return
    }

    // 处理接口返回的数据
    processChartData(apiData, dayCount)
  } catch (error) {
    console.error('获取接口调用数据失败:', error)
    errorMsg.value = '获取接口调用数据失败'

    // 出错时使用模拟数据
    const mockData = [
      { interfaceId: '1', interfaceName: '车辆送修', count: 12555, statisticalTime: '2025-10-16' },
      { interfaceId: '1', interfaceName: '车辆送修', count: 13204, statisticalTime: '2025-10-15' },
      { interfaceId: '1', interfaceName: '车辆送修', count: 22222, statisticalTime: '2025-10-14' },
      { interfaceId: '1', interfaceName: '车辆送修', count: 22222, statisticalTime: '2025-10-13' }
    ]
    processChartData(mockData, getDayCount(selectedDate.value))
  } finally {
    loading.value = false
  }
}

// 处理图表数据的辅助函数
function processChartData(apiData, dayCount) {
  // 按日期分组并计算每天的总调用量
  const dailyData = {}
  const dates = []
  const values = []

  // 从接口数据中提取所有日期并去重
  const dataDates = [...new Set(apiData.map((item) => item.statisticalTime))]

  // 对日期进行排序（从早到晚）
  dataDates.sort((a, b) => new Date(a) - new Date(b))

  // 只保留最近dayCount天的数据
  const recentDates = dataDates.slice(-dayCount)

  // 初始化每日数据
  recentDates.forEach((date) => {
    dailyData[date] = 0
  })

  // 计算每日总调用量
  apiData.forEach((item) => {
    if (dailyData[item.statisticalTime] !== undefined) {
      dailyData[item.statisticalTime] += item.count
    }
  })

  // 转换为图表所需的格式
  recentDates.forEach((date) => {
    // 格式化为MM-DD格式显示
    const dateObj = new Date(date)
    const formattedDate = `${dateObj.getMonth() + 1}-${dateObj.getDate()}`
    dates.push(formattedDate)
    values.push(dailyData[date] || 0)
  })

  // 更新图表数据
  chartOptions.value.xAxis.data = dates
  chartOptions.value.series[0].data = values
}

const dictTypeSelect = ref()

const handleItemClick = async (type, index) => {
  selectedIndex.value = index
  errorMsg.value = ''
  loading.value = true
  dictTypeSelect.value = type
  try {
    // 调用PortalApi接口获取字典数据
    const response = await PortalApi.getDictByCode({ dictType: type })
    // console.log('获取到的字典数据:', response)

    // 提取返回数据中的label字段
    if (response && response.length > 0) {
      selectedData.value = response.map((item) => ({
        id: item.id,
        label: item.label,
        value: item.value
      }))
    } else {
      selectedData.value = []
      errorMsg.value = '未获取到有效数据'
    }
  } catch (err) {
    errorMsg.value = '获取数据失败，请重试'
    console.error('接口调用失败:', err)
  } finally {
    loading.value = false
  }
}

const toDetail = (type: string, item: any) => {
  router.push({
    name: 'DataDetail',
    params: { id: item.catalogId, type: type }
  })
}

const handleMoreClick = (type: string) => {
  router.push({
    name: 'Data',
    params: { type: type }
  })
}

// const selectedIndex = ref(-1) // 不选中任何分类
const allDataLoading = ref(true) // 新增：用于控制所有数据的加载状态
const allDataError = ref('')
const allCategoriesData = ref<Map<string, { label: string; data: any[] }>>(new Map())
// 页面加载时默认选中第一个分类
onMounted(async () => {
  if (dataItems.value.length > 0) {
    handleItemClick(dataItems.value[0].dictType, 0)
  }

  const route = useRoute()
  // 检查URL
  if (route?.query) {
    const { tokenId, pv, cs } = route?.query

    // 只有当至少存在tokenId参数时才调用接口
    if (tokenId) {
      // 构建包含特定参数的对象
      const loginParams = {
        tokenId,
        pv: pv || '',
        cs: cs || ''
      }

      // 调用portalPersonLogin接口并传入特定参数
      PortalApi.portalPersonLogin(loginParams)
        .then((res) => {
          if (res) {
            setToken(res)
            router.push({
              name: 'Home'
            })
          }
        })
        .catch((error) => {})
    }
  }

  try {
    allDataLoading.value = true
    allDataError.value = ''

    // 并行获取所有分类的数据
    const promises = dataItems.value.map(async (item) => {
      try {
        const response = await PortalApi.getDictByCode({ dictType: item.dictType })
        const categoryData =
          response && response.length > 0
            ? response.map((dataItem) => ({
                id: dataItem.id,
                label: dataItem.label,
                value: dataItem.value,
                dictType: item.dictType
              }))
            : []
        return { dictType: item.dictType, label: item.label, data: categoryData }
      } catch (error) {
        console.error(`获取${item.label}数据失败:`, error)
        return { dictType: item.dictType, label: item.label, data: [] }
      }
    })

    // 等待所有请求完成
    const results = await Promise.all(promises)

    // 存储所有分类的数据
    results.forEach((result) => {
      allCategoriesData.value.set(result.dictType, {
        label: result.label,
        data: result.data
      })
    })
  } catch (error) {
    console.error('获取所有分类数据失败:', error)
    allDataError.value = '获取数据失败，请重试'
  } finally {
    allDataLoading.value = false
  }
  handleRecommendClick(1)
  getCountData()

  // 默认数据
  const defaultSevenDayData = [
    { dataNum: 386393522, day: '2025-10-15' },
    { dataNum: 389378883, day: '2025-10-16' },
    { dataNum: 483347046, day: '2025-10-17' },
    { dataNum: 486856281, day: '2025-10-18' },
    { dataNum: 489072914, day: '2025-10-19' },
    { dataNum: 488612576, day: '2025-10-20' },
    { dataNum: 484761924, day: '2025-10-21' }
  ]

  PortalApi.getDataNumBy7Day()
    .then((response) => {
      // 处理返回的七日数据并更新图表
      let chartData = response
      let useResponseDates = true

      // 如果接口返回的数据无效，则使用默认数据
      if (!chartData || !Array.isArray(chartData) || chartData.length === 0) {
        chartData = defaultSevenDayData
        useResponseDates = false
        console.log('使用默认数据，因为接口没有返回有效数据')
      }
      // 检查所有dataNum是否都为0
      else if (chartData.every((item) => item.dataNum === 0)) {
        // console.log('接口返回的所有dataNum都为0，使用默认数据中的数值，保留接口返回的日期')
        // 创建一个新数组，保留接口返回的日期，使用默认数据中的数值
        const result = []
        for (let i = 0; i < chartData.length; i++) {
          // 从默认数据中获取数值，如果默认数据不足，则从开始循环取
          const defaultData = defaultSevenDayData[i % defaultSevenDayData.length]
          result.push({
            day: chartData[i].day, // 保留接口返回的日期
            dataNum: defaultData.dataNum // 使用默认数据中的数值
          })
        }
        chartData = result
      }

      // 提取日期和数据
      const dates = chartData.map((item) => {
        const dateObj = new Date(item.day)
        return `${dateObj.getMonth() + 1}-${dateObj.getDate()}`
      })
      const dataNums = chartData.map((item) => item.dataNum)

      // 更新图表数据
      sevenDayChartOptions.value.xAxis.data = dates
      sevenDayChartOptions.value.series[0].data = dataNums
    })
    .catch((error) => {
      console.error('getDataNumBy7Day failed:', error)
      // 当请求出错时，使用默认数据
      const dates = defaultSevenDayData.map((item) => {
        const dateObj = new Date(item.day)
        return `${dateObj.getMonth() + 1}-${dateObj.getDate()}`
      })
      const dataNums = defaultSevenDayData.map((item) => item.dataNum)

      // 更新图表数据
      sevenDayChartOptions.value.xAxis.data = dates
      sevenDayChartOptions.value.series[0].data = dataNums
    })

  updateChartData()

  getLatestData()
})

watch(
  dataStatistics,
  () => {
    const groups: any = []
    for (let i = 0; i < dataStatistics.value.length; i += 2) {
      groups.push(dataStatistics.value.slice(i, i + 2))
    }
    groupedStatistics.value = groups
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
.content {
  margin: 20px 0 !important;
  padding: 0 160px;
}

.home-page {
  background: #ffffff;
}

.data-classify {
  text-align: center;
  font-size: 24px;
  color: #000000;
  margin: 20px 0 40px 0;
}

.column-item {
  // 移除原有样式，使用容器包裹背景和内容
  height: auto; // 让高度自适应内容
  padding: 0 !important;
}

.home-background {
  width: 100%;
  position: relative; /* 作为定位容器 */

  /* 覆盖层容器 */
  .content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */

    /* 文字和输入框组 */
    .text-input-group {
      display: flex;
      flex-direction: column; /* 垂直排列 */
      gap: 16px; /* 文字和输入框间距 */
      align-items: center; /* 内部元素水平居中 */
      // width: 300px; /* 可选：限制宽度 */

      .overlay-text {
        font-size: 24px;
        color: #ffffff; /* 根据图片背景调整文字颜色 */
        margin: 0;
        margin-bottom: 20px;
      }

      .overlay-input {
        // padding: 8px 12px;
        width: 500px;
        border: none;
        border-radius: 4px;
        // outline: none;

        :deep(.el-input-group__append) {
          width: 100px;
          background-color: #ffffff;
          padding: 2px;
          // border-radius: 8px;
        }

        .search-button {
          cursor: pointer;
          margin: 0;
          width: 100%;
          height: 100%;
          padding: 0;
          background-color: #17a7ff;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;

          img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
        }
      }
    }
  }

  .home-background-img {
    width: 100%;
    object-fit: cover;
    min-height: 400px; /* 根据需要调整高度 */
  }
}

.home-content {
  // padding: 0 160px;
  position: relative;
  // 设置背景图片
  background-image: url('@/assets/imgs/home/data-background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  // 最小高度和内边距
  min-height: 200px; // 原图片高度
  padding: 40px 0; // 根据需要调整
  width: 100%;

  // 内容居中容器
  .content-container {
    // padding: 0 160px;
    // max-width: 1200px; // 根据需要调整

    margin: 0 auto; // 水平居中
    width: 100%;
    // padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    // 垂直排列的内容组
    .stats-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      width: 100%;

      // 标题样式
      .stats-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;

        img {
          width: 36px;
          height: 36px;
        }

        span {
          font-size: 18px;
          color: #333333;
        }
      }

      // 横向统计容器
      .stats-container {
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 30px; // 统计项之间的间距
        // padding: 0 40px;

        // 单个统计项样式
        .stat-item {
          flex: 1;
          min-width: 120px;
          text-align: center;
          font-size: 20px;
          color: #000000;

          // .stat-label {
          //   font-size: 14px;
          //   color: #333333;
          // }

          .stat-value {
            color: #006eff;
            margin: 0 6px;
            font-size: 28px;
          }

          // .stat-suffix {
          //   font-size: 14px;
          //   color: #333333;
          // }
        }
      }
    }
  }

  // 背景图片样式
  .background-img {
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    height: 200px;
    object-fit: cover;
  }
}

.data-classify-container {
  background-color: #f0f8ff;
  padding: 50px 0;
  .data-classify-row {
    // 背景图片容器
    .column-container {
      position: relative; // 保持相对定位
      width: 100%;
      min-height: 600px; // 最小高度600px
      background-image: url('@/assets/imgs/home/column.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: 20px;
      // 使用flex实现内容居中
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // 内容居中容器
    .column-content-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      width: 100%; // 保持宽度充满
      max-width: 90%; // 限制最大宽度（原样式中通过max-width:90%实现）
    }

    // 单个内容项样式
    .column-item-content {
      width: 100%; // 宽度占满容器
      max-width: 90%; // 最大宽度限制
      display: flex; // 使用flex布局
      justify-content: space-between; // 两端对齐
      align-items: center; // 垂直居中
      padding: 20px; // 内边距
      cursor: pointer;
      // 添加过渡动画
      transition: all 0.5s ease; // 所有属性变化在0.3秒内完成，使用ease缓动函数
      border-left: 3px solid transparent; // 初始透明边框
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0)
      ); // 初始透明背景

      &:hover {
        border-left: 3px solid #ffffff; // 左侧2px白色边框
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.4),
          rgba(255, 255, 255, 0)
        ); // 从左到右的白色渐变
      }

      &.active {
        border-left: 3px solid #ffffff; // 左侧2px白色边框
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.4),
          rgba(255, 255, 255, 0)
        ); // 从左到右的白色渐变
      }

      .content-left {
        display: flex;
        align-items: center;
        gap: 8px; // 图标与文字间距
        img {
          width: 24px;
          height: 24px;
        }

        span {
          font-size: 18px;
          color: #daeffc;
        }
      }

      .content-right {
        // 箭头图标样式
        img {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
}

.right-content-container {
  padding: 50px 80px;
  min-height: 600px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    color: #606266;

    .el-icon {
      font-size: 32px;
      margin-bottom: 16px;
    }
  }

  .error-container {
    margin: 20px 0;
  }

  .content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 32px;

    .grid-item {
      display: flex;
      cursor: pointer;
      align-items: center;
      // padding: 16px;
      // background: #f8f9fa;
      border-radius: 6px;
      // border: 1px solid #e9ecef;
      transition: all 0.3s ease;

      // &:hover {
      //   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      //   transform: translateY(-2px);
      // }

      .item-icon {
        margin-right: 12px;
        display: flex;
        align-items: center;

        img {
          width: 24px;
          height: 24px;
        }
      }

      .item-content {
        flex: 1;

        .item-label {
          font-size: 14px;
          color: #606266;
          // margin-bottom: 4px;
        }

        .item-value {
          font-size: 18px;
          font-weight: bold;
          color: #17a7ff;
        }
      }
    }
  }

  .empty-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
  }
}

.data-statistics-container {
  padding: 50px 0;
  .data-statistics-row {
    // padding: 0 !important;
    .statistics-container {
      // 背景图片设置
      height: 100%;
      background-image: url('@/assets/imgs/home/statistics.png'); // 替换为实际背景图片路径
      background-size: cover;
      background-position: center;
      min-height: 600px; // 根据实际背景图片高度调整
      padding: 20px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      .statistics-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
      }

      .statistics-row {
        // 每行容器
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 20px; // 行间距

        .statistic-item {
          // 单个数据项
          flex: 1;
          max-width: 150px; // 最大宽度
          display: flex;
          flex-direction: column; // 垂直排列label和value
          align-items: center;
          margin: 20px 15px; // 项间距

          .stat-label {
            font-size: 20px;
            color: #333333;
            margin-bottom: 8px;
            text-align: center;
          }

          .stat-value {
            font-size: 24px;
            color: #17a7ff; // 数值颜色
            font-weight: bold;
            text-align: center;
          }
        }
      }
    }
  }

  .charts-container {
    display: flex;
    flex-direction: column;
    gap: 24px;

    .chart-item {
      background: #ffffff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .chart-title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
        }

        .date-selector {
          display: flex;
          align-items: center;
        }
      }

      .chart-content {
        height: 300px;
      }
    }
  }
}

.data-recommend-container {
  background-color: #f0f8ff;
  padding: 50px 0;

  .recommend-tabs {
    display: flex;
    justify-content: start;
    gap: 40px;
    margin-bottom: 40px !important;

    .recommend-tab {
      padding: 12px 24px;
      cursor: pointer;
      border-radius: 20px;
      font-size: 16px;
      color: #606266;
      transition: all 0.3s ease;
      border: 1px solid transparent;

      &:hover {
        color: #17a7ff;
        border-color: #17a7ff;
      }

      &.active {
        background-color: #17a7ff;
        color: #ffffff;
        border-color: #17a7ff;
      }
    }
  }

  .recommend-content {
    padding: 0 160px;

    .column-content {
      background-color: #ffffff;
      border-radius: 8px;
      margin: 0 !important;
      .recommend-category {
        padding: 20px;
      }
    }

    .divider {
      height: 1px;
      background-color: #d6d6d6;
      margin-bottom: 15px;
    }

    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;

      .item-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
      }

      .item-more {
        display: flex;
        align-items: center;
        cursor: pointer;
        color: #666666;
        font-size: 14px;

        img {
          width: 16px;
          height: 16px;
          margin-left: 4px;
        }

        :hover {
          color: #17a7ff;
          transition: all 0.5s ease;
        }
      }
    }

    .recommend-item {
      // border-radius: 8px;
      padding: 20px;
      // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;

      .item-body {
        background: linear-gradient(to right, #e6f2ff, #d9ecff);
        padding: 20px;
        margin: 10px 0;
        border-radius: 8px;
        cursor: pointer;
        .item-desc {
          font-size: 14px;
          color: #606266;
          line-height: 1.5;
          margin-bottom: 15px;
          cursor: pointer;

          &:hover {
            color: #17a7ff;
          }
        }

        .item-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .footer-left,
          .footer-right {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #909399;

            img {
              width: 14px;
              height: 14px;
              margin-right: 6px;
            }
          }
        }
      }
    }
  }
}

.all-categories-container {
  width: 100%;
}

.category-section {
  display: flex;
  margin-bottom: 24px;
  height: 140px;
  // padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  .category-title {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    font-size: 16px;
    width: 20%;
    font-weight: 600;
    color: #17a7ff;
    background-image: url('@/assets/imgs/home/back.png');
    background-size: cover;

    .category-title-item {
      display: flex;
      align-items: center;

      .category-title-icon-first {
        width: 48px;
        height: 48px;
        margin-right: 8px;
      }
      .category-title-icon-second {
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
    }
  }
}

.category-content {
  width: 80%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 60px;
  gap: 8px;
}

.data-item-row {
  display: flex;
  width: 150px;
  justify-content: start;
  padding: 12px 0;

  .data-item-left {
    font-weight: 500;
    color: #333333;
    text-align: center;
    margin-left: 8px;
    cursor: pointer;
  }
}

.data-item-right {
  flex: 1;
  color: #303133;
  word-break: break-all;
}

.no-data-text {
  text-align: center;
  color: #909399;
  padding: 20px 0;
}

/* 暂无数据容器样式 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ebf1 100%);
  border-radius: 12px;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.empty-container:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* 大图标样式 */
.empty-icon-large {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.8;
  animation: pulse 2s infinite;
}

/* 小图标样式 */
.empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.7;
}

/* 标题样式 */
.empty-title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
}

/* 描述样式 */
.empty-desc {
  font-size: 14px;
  color: #909399;
  margin-bottom: 16px;
  max-width: 280px;
  line-height: 1.5;
}

/* 空数据项样式 */
.empty-data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #909399;
  background-color: #fafafa;
  border-radius: 8px;
  margin: 10px 0;
}

/* 空数据文本样式 */
.empty-text {
  font-size: 14px;
  color: #909399;
}

/* 动画效果 */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}
</style>
